<template>
	<view class="wode">
		<div class="wode_top">
			<div class="wode_top_cont">
				<div class="wode_top_cont_left">
					<div class="wode_top_cont_left_top">
						{{userInfo.user.nickname || ''}}<span v-if="nicknameText!=''"></span>{{nicknameText}} 
						<!-- {{userInfo.user.phone || ''}} -->
					</div>
					<div class="wode_top_cont_left_bottom">
						<!-- 修改个人信息> -->
						{{month}}目标音浪：{{goalgoal || 0}}
					</div>
				</div>
				<div class="wode_top_cont_right" @click='changePhoneEvent()'>
					<image :src="userInfo.user.avatar_url" mode=""></image>
					<!-- <u-avatar :src="userInfo.user.avatar_url"   class="actImage"></u-avatar> -->
					<image src="@/static/image/8.29bj.png" mode="" class="wode_top_cont_right_bj"></image>
				</div>
			</div>
			<div class="wode_top_cont_bottom">
				<div class="wode_top_cont_bottom_left">
					<div class="wode_top_cont_bottom_left_top">
						房间号：{{userInfo.floor || ''}} {{userInfo.room || ''}}
					</div>
					<div class="wode_top_cont_bottom_left_bottom">
						<!-- 团播房 | 和尔泰1栋401 -->
						{{userInfo.floor || ''}}
					</div>
				</div>
				<div class="wode_top_cont_bottom_right" @click='huixianEvent()' v-if="userNowStatus !== 2">
					申请回线上
				</div>

			</div>
		</div>
		<!-- 数据 -->
		<div class="wode_top_num">
			<div class="wode_top_num_items" v-for="(item,idx) in list" :key="idx" @click='myTabEvent(item.url)'>
				<div class="wode_top_num_title">
					{{item.num}}
				</div>
				<div :class="idx==2?'wode_top_num_bottom wode_top_num_bottom_index':'wode_top_num_bottom' ">
					{{item.name}}
				</div>
			</div>
		</div>
		<!-- 点击切换 -->
		<div class="wode_list_ite">
			<div class="wode_list_ite_items" v-for="(ite,idx) in wdList" :key="idx" @click='myTabEvent(ite.url)'>
				<div class="wode_list_ite_items_img">
					<image src="https://wx.sjcmhz.com/static/logo.png" mode=""></image>
				</div>
				<div class="wode_list_ite_items_cont">
					<div class="wode_list_ite_items_cont_left">
						{{ite.name}}
					</div>
					<div class="wode_list_ite_items_cont_right">
						<!-- <image src="https://wx.sjcmhz.com/static/logo.png" mode=""></image>
						 -->
						<u-icon slot="right" name="arrow-right" color='#C9C9C9'></u-icon>
					</div>
				</div>
			</div>
		</div>

		<!-- 二维码 -->
		<div class="allMask" v-if='erShow' @click='erShow = false'>

		</div>
		<div class="class_er" v-if="erShow" @longpress="DownImg">
			<image :src="httpImgUrl" mode=""></image>
		</div>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				userNowStatus: uni.getStorageSync('userNowStatus'),
				list: [{
					name: '待处理服务',
					num: 0,
					url: '/pages/GD/index'
				}, {
					name: '待签到课程',
					num: 0,
					url: '/pages/my/classList'
				}, {
					name: '待评价',
					num: 0,
					url: '/pages/my/pingjia'
				}],
				wdList: [{
						img: "",
						name: '我的设备',
						url: '/pages/my/mydev'
					}, {
						img: "",
						name: '联系楼长',
						url: '/pages/my/contract'
					}, {
						img: "",
						name: '帮助中心',
						url: '/pages/my/help'
					}, {
						img: "",
						name: '意见反馈',
						url: '/pages/my/commit'
					},
					{
						img: "",
						name: '水电缴纳',
						url: 0
					},
					{
						img: "",
						name: '退出登陆',
						url: 1
					}
				],


				userInfo: {
					user: {}
				},
				goalgoal: 0, //目标音浪
				httpImgUrl: '',
				erShow: false,
				nicknameText:'',
				month:''
			}
		},
		onShow() {
			this.$utils.isLogin()
			this.getUserInfo()
			this.getUserGoal()
		},
		onLoad() {

		},
		methods: {
			// 下载图片
			DownImg() {
				console.log("长按触发");

				console.log("httpImgUrl", this.httpImgUrl);
				// 假设你有一个网络图片的链接
				let imageUrl = this.httpImgUrl;
				// 下载图片
				uni.downloadFile({
					url: imageUrl,
					success: downloadResult => {
						if (downloadResult.statusCode === 200) {
							// 下载成功，保存图片到系统相册
							uni.saveImageToPhotosAlbum({
								filePath: downloadResult.tempFilePath,
								success: () => {
									uni.showToast({
										icon: 'none',
										title: '图片保存成功'
									});
								},
								fail: () => {
									uni.showToast({
										title: '图片保存失败',
										icon: 'none'
									});
								}
							});
						} else {
							uni.showToast({
								title: '图片下载失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '图片下载失败',
							icon: 'none'
						});
					}
				});
			},
			// 获取到目标值
			async getUserGoal() {
				const {
					data
				} = await this.$request(this.$Api.userGoal, {

				}, "POST")
				if (data.code !== 0) return
				this.goalgoal = data.data.list.goal
				this.month = data.data.list.month
				console.log('goalgoal', this.goal, data)
			},
			async getUserInfo() {
				const {
					data
				} = await this.$request(this.$Api.userUser, {

				}, "POST")
				if (data.code !== 0) return
				this.userInfo = data.data
				this.nicknameText = data.data.nickname
				this.list[0].num = data.data.notice
				this.list[1].num = data.data.class
				this.list[2].num = data.data.comment
				this.httpImgUrl = data.data.s_code
				this.userNowStatus = data.data.status
			},
			changePhoneEvent() {
				console.log('changePhoneEventchangePhoneEventchangePhoneEvent')
				uni.navigateTo({
					url: '/pages/my/userInfo'
				})
			},
			myTabEvent(url) {
				if (url === 0) {
					this.erShow = true
					return
				}
				if (url === 1) {

					uni.showModal({
						title: '提示',
						content: '是否退出登陆？',
						success: async (res) => {
							if (res.confirm) {
								// uni.clearStorageSync()
								uni.removeStorage({
									key:'userStatus'
								})
								uni.navigateTo({
									url: '/pages/login'
								})
							}
						}
					});


					return
				}
				uni.navigateTo({
					url: url
				})
			},
			huixianEvent() {
				uni.navigateTo({
					url: '/pages/my/huixian'
				})
			}
		}
	}
</script>

<style lang="scss">
	.wode {
		background: #F5F5F5;
		min-height: 100vh;
	}


	// 二维码
	.class_er {
		width: 588rpx;
		min-height: 588rpx;
		background: #FFFFFF;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -301rpx;
		margin-top: -270rpx;
		padding: 24rpx;
		box-sizing: border-box;
		z-index: 9999;
		display: flex;
		flex-wrap: wrap;


		image {
			width: 602rpx;
			height: 458rpx;
		}
	}

	.wode_top {
		width: 750rpx;
		height: 335rpx;
		background: #8C18FA;
		font-size: 36rpx;
		color: #fff;
		position: relative;

		.wode_top_cont {
			width: 100%;
			height: 100%;
			display: flex;
			// align-items: center;
			justify-content: space-between;
			padding: 36rpx 38rpx 14rpx 38rpx;
			box-sizing: border-box;

			.wode_top_cont_left_bottom {
				min-width: 186rpx;
				height: 50rpx;
				background: #FFFFFF;
				border-radius: 25rpx;
				color: #9013FE;
				font-size: 22rpx;
				text-align: center;
				line-height: 50rpx;
				margin-top: 18rpx;
				padding: 0 15rpx;
			}

			.wode_top_cont_right {
				width: 116rpx;
				height: 116rpx;
				border: 6rpx solid #FFFFFF;
				border-radius: 50%;
				box-sizing: border-box;
				position: relative;
				display: flex;
				align-items: center;

				.actImage {
					width: 104rpx;
					height: 104rpx;
					border-radius: 50%;
					// zoom: 2;

					image {
						width: 100%;
						height: 100%;
					}
				}

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

				.wode_top_cont_right_bj {
					position: absolute;
					right: -12rpx;
					bottom: -12rpx;
					width: 50rpx !important;
					height: 50rpx !important;

					image {}
				}


			}
		}

		.wode_top_cont_bottom {
			width: 704rpx;
			height: 162rpx;
			background: #3F0077;
			position: absolute;
			left: 22rpx;
			bottom: 0;
			padding: 44rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			line-height: 44rp;
			display: flex;
			justify-content: space-between;
			align-items: center;

		}

		.wode_top_cont_bottom_left_bottom {
			font-size: 24rpx;
			margin-top: 8rpx;
			opacity: 0.8;
		}

		.wode_top_cont_bottom_right {
			width: 154rpx;
			height: 44rpx;
			background: #3F0077;
			border-radius: 12rpx;
			border: 2rpx solid #F5A623;
			font-size: 24rpx;
			color: #F5A623;
			text-align: center;
			line-height: 42rpx;
		}
	}

	.wode_top_num {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 180rpx;
		width: 100%;
		padding: 0 22rpx 0 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		background: #fff;

		.wode_top_num_items {
			width: 33%;
		}

		.wode_top_num_title {
			font-size: 52rpx;
			color: #9013FE;
			text-align: center;
		}

		.wode_top_num_bottom {
			font-size: 28rpx;
			margin-top: 14rpx;
			text-align: center;
		}

		.wode_top_num_bottom_index {
			padding-left: 20rpx;
		}

	}

	.wode_list_ite {
		width: 100%;
		height: auto;
		background: #fff;
		padding: 10rpx 34rpx 200rpx 34rpx;
		box-sizing: border-box;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		.wode_list_ite_items {
			width: 100%;
			height: 96rpx;
			display: flex;
			align-items: center;
		}

		.wode_list_ite_items_cont {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #DDDDDD;
			width: 620rpx;
			margin-left: 20rpx;
			height: 100%;
			font-size: 32rpx;

			.wode_list_ite_items_cont_right {
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}

		}

	}
</style>